<title>菜单分配</title>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm4">
            <fieldset class="layui-elem-field">
                <input type="text" id="key" placeholder="检索权限" class="layui-input" title="检索权限">
                <div id="navTree">
                    <ul id="tree" class="ztree"></ul>
                </div>
            </fieldset>
        </div>
        <div class="layui-col-sm8">
            <div class="layui-card">
                <div class="layui-card-header">用户留言</div>
                <div class="layui-card-body">
                    <div class="layui-form-item" id="menu_zero_btn">
                        <button class="layui-btn layui-bg-blue layui-btn-sm" data-type="up">
                            <i class="layui-icon layui-icon-up"></i>
                            上移
                        </button>
                        <button class="layui-btn layui-bg-blue layui-btn-sm" data-type="down">
                            <i class="layui-icon layui-icon-down"></i>
                            下移
                        </button>
                        <button class="layui-btn layui-bg-green layui-btn-sm" data-type="add">
                            <i class="layui-icon layui-icon-add-1"></i>
                            添加
                        </button>
                        <button class="layui-btn layui-btn-danger layui-btn-sm" data-type="del">
                            <i class="layui-icon layui-icon-delete"></i>
                            删除
                        </button>
                    </div>
                    <div class="layui-form" lay-filter="menu-model-filter">
                        <div class="layui-form-item layui-hide" id="menu_id">
                            <label class="layui-form-label">编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="id" placeholder="编号" class="layui-input" disabled/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">路由名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" placeholder="路由名称"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" placeholder="标题"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图标</label>
                            <div class="layui-input-block">
                                <input type="text" name="icon" placeholder="图标"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">URL</label>
                            <div class="layui-input-block">
                                <input type="text" name="jump" placeholder="URL"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-inline">
                                <input type="button" lay-submit lay-filter="menu-submit-filter" value="确认"
                                       class="layui-btn">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--根目录不能操作-->
<style type="text/css">
    .ztree li span.button.switch.level0 {
        visibility: hidden;
        width: 1px;
    }

    .ztree li ul.level0 {
        padding: 0;
        background: none;
    }
</style>
<script>
    var init_id = '00000000-0000-0000-0000-000000000000';
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin,
            form = layui.form,
            jQ = layui.$,
            id = init_id;

        var setting = {
            async: {
                enable: true,
                autoParam: ["id"]
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parent",
                    rootPId: 0
                }
            },
            check: {
                // enable: true//checkbox
            },
            view: {
                showIcon: showIcon,
                nameIsHTML: true, //允许name支持html
                selectedMulti: false
                // , fontCss: {'color': 'blue', 'font-family': '微软雅黑'}
                , dblClickExpand: dblClickExpand
            },
            edit: {
                enable: false,
                editNameSelectAll: false
            },
            callback: {
                onClick: onClick//点击事件
            }
        };

        function onClick(event, treeId, treeNode, clickFlag) {
            jQ("#menu_id").removeClass("layui-hide");
            rest();
            id = treeNode.id;
            admin.req({
                url: "/sys/menu/get"
                , data: {id: treeNode.id}
                , success: function (res) {
                    //初始化弹框
                    form.render(null, 'menu-model-filter');
                    form.val('menu-model-filter', res.data)
                }
            });
            // if (treeNode.level > 0) {
            //     //实现单击展开
            //     var treeObj = getTreeObj();
            //     treeObj.expandNode(treeNode);
            // }
        }

        //取消双击展开功能
        function dblClickExpand(treeId, treeNode) {
            return true;
        }

        //设置图标
        function showIcon(treeId, treeNode) {
            return true;
        }

        //获取树对象
        function getTreeObj() {
            return $.fn.zTree.getZTreeObj("tree");
        }

        admin.req({
            url: "/sys/menu/get_tree"
            , type: 'post'
            , success: function (res) {
                res.data[0].open = true
                res.data[0].iconClose = "/zTree_v3/img/1_open.png"
                res.data[0].iconOpen = "/zTree_v3/img/1_open.png"
                $.fn.zTree.init($("#tree"), setting, res.data);
                fuzzySearch('tree', '#key', null, true); //初始化模糊搜索方法
            }
        });
        //监听提交
        form.on('submit(menu-submit-filter)', function (data) {
            var treeObj = getTreeObj();
            var treeNode = treeObj.getSelectedNodes();
            if (treeNode.length === 0) {
                layer.msg("请选中一个根");
                return;
            }
            data.field.parent = treeNode[0].id;
            removeProperty(data.field);
            layer.confirm('确定提交吗？', function () {
                admin.req({
                    url: "/sys/menu/save"
                    , type: 'post'
                    , async: false
                    , data: data.field
                    , done: function (res) {
                        if (res.data) {
                            var newNode = {id: res.data, parent: data.field.parent, name: data.field.title};
                            treeObj.addNodes(treeNode[0], newNode);
                        } else {
                            //修改标题名称
                            treeNode[0].name = data.field.title;
                            treeObj.updateNode(treeNode[0]);
                        }
                        layer.msg(res.msg);
                    }
                });
            });

        });
        jQ('#menu_zero_btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        var active = {
            up: function () {
                var treeObj = getTreeObj();
                //选中的
                var treeNode = treeObj.getSelectedNodes();
                admin.req({
                    url: '/sys/menu/move'
                    , type: 'post'
                    , data: {id: id}
                    , done: function (res) {
                        layer.msg(res.msg)
                        var node = treeNode[0];
                        var preNode = node.getPreNode();
                        if (preNode) {
                            treeObj.moveNode(preNode, node, "prev");
                        }
                    }
                });
            }
            , down: function () {
                var treeObj = getTreeObj();
                //选中的
                var treeNode = treeObj.getSelectedNodes();
                admin.req({
                    url: '/sys/menu/move'
                    , type: 'post'
                    , data: {id: id, direction: 1}
                    , async: false
                    , done: function (res) {
                        layer.msg(res.msg);
                        var node = treeNode[0];
                        var nextNode = node.getNextNode();
                        if (nextNode) {
                            treeObj.moveNode(nextNode, node, "next");
                        }
                    }
                });
            }
            , del: function () {
                var treeObj = getTreeObj();
                var nodes = treeObj.getSelectedNodes();
                if (nodes.length > 0) {
                    layer.confirm('确定删除这些数据吗？', function () {
                        //删除选中的节点
                        if (nodes[0].id === init_id) {
                            layer.alert("禁止删除根节点！！！")
                        } else {
                            admin.req({
                                url: '/sys/menu/del'
                                , type: 'post'
                                , async: false
                                , data: {id: id}
                                , done: function (res) {
                                    treeObj.removeNode(nodes[0]);
                                    layer.msg(res.msg);
                                }
                            });
                        }

                    });
                } else {
                    layer.msg("请选要删除的数据！！")
                }
            }
            , add: function () {
                jQ("#menu_id").addClass("layui-hide");
                rest();
            }
        };

        function rest() {
            form.val("menu-model-filter", {
                id: "",
                name: "",
                title: "",
                icon: "",
                jump: "",
                spread: "",
                parent: "",
                level: ""
            });
        }
    });

</script>